<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>聊天记录</title>
    <link rel="stylesheet" href="../../../layui.css">
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        body .layim-chat-main {
            height: 80%;
        }
    </style>
</head>
<body>
    <div class="layim-chat-main">
        <ul id="LAY_view">

        </ul>
    </div>

    <div id="LAY_page" style="margin: 0 10px;">

    </div>

    <textarea title="消息模版" id="LAY_tpl" style="display:none;">
        {{# layui.each(d.data, function(index, item){
            if(item.id == parent.layui.layim.cache().mine.id){ }}
                <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp * 1000) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
            {{# } else { }}
                <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp * 1000) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
            {{# }
        }); }}
    </textarea>
    <script src="../../../../layui.js"></script>
    <script>
        layui.use(['layim', 'laypage'], function () {
            var layim = layui.layim
            var layer = layui.layer
            var laytpl = layui.laytpl
            var $ = layui.jquery
            var laypage = layui.laypage
            var WsSdk = parent.WsSdk
            var params = WsSdk.urlParse(location.search)
            var isfirst = true
            var messageHistory = function (page) {
                if(params.type === 'friend') {
                    WsSdk.userMessage({
                        userId: parent.layui.layim.cache().mine.id,
                        friendId: params.id,
                        pageNo: page
                    }, function (res) {
                        if(res.code === 200) {
                            render(res.message)
                        }
                    })
                }else {
                    WsSdk.groupMessage({
                        groupId: params.id,
                        pageNo: page
                    }, function (res) {
                        if(res.code === 200) {
                            render(res.message)
                        }
                    })
                }
            }
            messageHistory(1)
            var render = function (message) {
                $('#LAY_view').html(
                    laytpl(LAY_tpl.value).render({
                        data: message.messageList.reverse()
                    })
                )
                if(!isfirst) {
                    return false
                }
                laypage.render({
                    elem: 'LAY_page',
                    limit: 10,
                    count: message.count,
                    jump: function (obj, first) {
                        if(!first){
                            messageHistory(obj.curr)
                        } else {
                            isfirst = false
                        }
                    }
                })
            }
            console.log(parent.WsSdk)
            console.log(parent.layui.layim.cache())
        })
    </script>
</body>
</html>
